import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar,CheckboxField } from 'saltui';
import Number from  './Number'

/**
 *  <CheckIn room   buttonName >
 */
export default class SettingAdd extends React.Component {
  constructor(props) {

    super(props);
    this.state = {
      prices :[]
    };
    this.state.buttonName = this.props.buttonName;
    console.info(this.state.buttonName );
  }

  onChange = (id,value) =>{
    console.info(value);
  }

  handleTextChange = (id,value) =>{
    console.info(value);
  }

  getCheckboxFieldProps() {
    return {
      data: [
        {
          checked: false,
          text: (<div>11111</div>),
          disable: false,
          value: '1',
          slotText: '11111',
        },
        {
          checked: false,
          text: (<div>2222</div>),
          disable: false,
          value: '2',
          slotText: '2222',
        },
      ],
      readOnly: false,
      placeholder: '请选择',
      maskCloseable: true,
      groupListFlag: true,
      onChange(data) {
        console.log(data);
      },
      /* groupListArgument: {
          lineIndent: 25,
          itemIndent: 45
      },*/
      mode: 'list',
      required: true,
      // iconPosition: 'right',
    };
  }


  render() {
    let that = this;
    let CheckboxFieldProps = this.getCheckboxFieldProps();
    return <Button type="secondary"  size="small" onClick={() => {
      Popup.show(<div className="demo-popup-container">     <Group.List >
          <Field label="名字" tip={<div>输入类型名字</div>}>
            <div>
              <TextField
                placeholder="请输入"
                value=""
                onChange={(value) => { t.handleTextChange('t1', value); }}
              />
            </div>
          </Field>
        <Field label="价格" tip={<div>请输入此客房类型统一价格</div>}>
          <div>
            <Number value={1} id = {0} onChange={that.onChange} ></Number>
          </div>
        </Field>
        <Field label="设施" tip={<div>请选设施</div>}>
          <div>
            <CheckboxField
              {...CheckboxFieldProps}
              mode="slot"
              required={false}
            />
          </div>
        </Field>
        <Field label="服务提供" tip={<div>请选服务提供</div>}>
          <div>
            <CheckboxField
              {...CheckboxFieldProps}
              mode="slot"
              required={false}
            />
          </div>
        </Field>

        <Field label="注意事项" tip={<div>请选注意事项</div>}>
          <div>
            <CheckboxField
              {...CheckboxFieldProps}
              mode="slot"
              required={false}
            />
          </div>
        </Field>

        <Field label="税" tip={<div>请选税</div>}>
          <div>
            <CheckboxField
              {...CheckboxFieldProps}
              mode="slot"
              required={false}
            />
          </div>
        </Field>

        <Field label="服务费" tip={<div>请选服务费</div>}>
          <div>
            <CheckboxField
              {...CheckboxFieldProps}
              mode="slot"
              required={false}
            />
          </div>
        </Field>

        </Group.List>
<div className="notice-div">
  <NoticeBar className="noticeMessage" message={"totol:$4445.555"} closable={false} type="warning" />
</div>
        <div className="demo-line">
          <Button type="secondary"  size="small"  >提交</Button>
          <Button type="secondary"  size="small"  >取消</Button>
        </div></div>, {
        animationType: 'slide-down',
      });
    }} >{this.state.buttonName}</Button>
  }
}
